<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 北极星后台</title>
    <style>
        /* 基础样式 */
        :root {
            --primary-color: #3498db;
            --primary-light: rgba(52, 152, 219, 0.1);
            --secondary-color: #2c3e50;
            --danger-color: #e74c3c;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --sidebar-width: 250px;
            --transition-speed: 0.3s;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        /* 按钮样式 */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all var(--transition-speed);
            gap: 8px;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-outline-primary {
            background-color: transparent;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
        }

        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }

        .btn-success {
            background-color: var(--success-color);
            color: white;
        }

        .btn-secondary {
            background-color: #95a5a6;
            color: white;
        }

        .btn-sm {
            padding: 8px 15px;
            font-size: 13px;
        }

        .btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-outline-primary:hover {
            background-color: var(--primary-light);
        }

        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            overflow: hidden;
            transition: all var(--transition-speed);
        }

        .card:hover {
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            padding: 18px 25px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f8f9fa;
        }

        .card-header h3 {
            font-size: 20px;
            color: var(--secondary-color);
            font-weight: 600;
        }

        .card-body {
            padding: 25px;
        }

        /* 顶部导航 */
        .top-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-info img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .user-info span {
            font-weight: 500;
        }

        /* 个人资料容器 */
        .profile-container {
            display: flex;
            gap: 30px;
        }

        .profile-sidebar {
            width: 280px;
            flex-shrink: 0;
        }

        .profile-content {
            flex: 1;
            min-width: 0;
        }

        /* 头像区域 */
        .profile-avatar {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }

        .profile-avatar img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
            transition: all var(--transition-speed);
        }

        .profile-avatar:hover img {
            transform: scale(1.03);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }

        .profile-avatar .btn {
            position: relative;
            z-index: 1;
        }

        /* 头像上传预览 */
        .avatar-upload {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity var(--transition-speed);
        }

        .profile-avatar:hover .avatar-upload {
            display: flex;
            opacity: 1;
        }

        .avatar-upload-btn {
            background-color: white;
            color: var(--primary-color);
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 13px;
            margin-top: 10px;
        }

        /* 个人资料菜单 */
        .profile-menu ul {
            list-style: none;
        }

        .profile-menu li {
            margin-bottom: 8px;
        }

        .profile-menu li a {
            display: flex;
            align-items: center;
            padding: 12px 18px;
            color: var(--secondary-color);
            text-decoration: none;
            border-radius: 6px;
            transition: all var(--transition-speed);
            gap: 10px;
        }

        .profile-menu li a i {
            width: 20px;
            text-align: center;
        }

        .profile-menu li.active a,
        .profile-menu li a:hover {
            background-color: var(--primary-light);
            color: var(--primary-color);
            font-weight: 500;
        }

        .profile-menu li.active a {
            box-shadow: inset 3px 0 0 var(--primary-color);
        }

        /* 标签页内容 */
        .tab-pane {
            display: none;
            animation: fadeIn 0.3s ease-out;
        }

        .tab-pane.active {
            display: block;
        }

        .tab-pane h4 {
            margin-bottom: 20px;
            color: var(--secondary-color);
            font-size: 18px;
            font-weight: 600;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--secondary-color);
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: all var(--transition-speed);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            outline: none;
        }

        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }

        .col-md-6 {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 10px;
        }

        /* 社交图标 */
        .social-icon {
            margin-right: 10px;
            color: var(--secondary-color);
            width: 20px;
            text-align: center;
        }

        /* 密码强度指示器 */
        .password-strength {
            margin-top: 10px;
            height: 5px;
            background-color: #eee;
            border-radius: 3px;
            overflow: hidden;
        }

        .password-strength-bar {
            height: 100%;
            width: 0;
            background-color: #ddd;
            transition: width 0.3s, background-color 0.3s;
        }

        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .profile-sidebar {
                width: 220px;
            }
        }

        @media (max-width: 768px) {
            .profile-container {
                flex-direction: column;
            }

            .profile-sidebar {
                width: 100%;
                margin-bottom: 30px;
            }

            .col-md-6 {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        /* 工具类 */
        .mt-3 {
            margin-top: 15px;
        }

        .mb-4 {
            margin-bottom: 20px;
        }
    </style>
    <!-- 引入Font Awesome图标 -->
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">-->
    <link rel="stylesheet" href="../../fontawesome-free-6.7.2-web/css/all.min.css">
</head>
<body>
<div class="main-content">
<!--    <div class="top-nav">
        <div>
            <button class="btn btn-primary" id="toggleSidebar">
                <i class="fas fa-bars"></i>
            </button>
        </div>
        <div class="user-info">
            <img src="https://via.placeholder.com/40" alt="用户头像">
            <span>北极星</span>
        </div>
    </div>-->

    <div class="card">
        <div class="card-header">
            <h3>个人资料</h3>
        </div>
        <div class="card-body">
            <div class="profile-container">
                <div class="profile-sidebar">
                    <div class="profile-avatar">
                        <img src="https://via.placeholder.com/150" alt="头像" id="avatarPreview">
                        <div class="avatar-upload">
                            <button class="avatar-upload-btn" id="uploadAvatarBtn">
                                <i class="fas fa-camera"></i> 更换头像
                            </button>
                        </div>
                        <input type="file" id="avatarInput" accept="image/*" style="display: none;">
                        <button class="btn btn-outline-primary btn-sm mt-3" id="changeAvatarBtn">
                            <i class="fas fa-camera"></i> 更换头像
                        </button>
                    </div>
                    <div class="profile-menu">
                        <ul>
                            <li class="active">
                                <a href="#basic-info">
                                    <i class="fas fa-user"></i> 基本信息
                                </a>
                            </li>
                            <li>
                                <a href="#security">
                                    <i class="fas fa-lock"></i> 账号安全
                                </a>
                            </li>
                            <li>
                                <a href="#social-links">
                                    <i class="fas fa-share-alt"></i> 社交链接
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="profile-content">
                    <div class="tab-pane active" id="basic-info">
                        <h4>基本信息</h4>
                        <form id="basicInfoForm">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>姓名</label>
                                        <input type="text" class="form-control" id="fullName" value="北极星" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>职业</label>
                                        <input type="text" class="form-control" id="jobTitle" value="全栈开发工程师" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>个人简介</label>
                                <textarea class="form-control" id="bio" rows="4" required>我是一名热爱技术的全栈开发工程师，拥有计算机科学学士学位。在过去5年中，我帮助各种规模的企业实现了他们的技术愿景，从初创公司到财富500强企业。</textarea>
                            </div>
                            <div class="form-group">
                                <label>邮箱</label>
                                <input type="email" class="form-control" id="email" value="contact@beijixing.com" required>
                            </div>
                            <div class="form-group">
                                <label>联系电话</label>
                                <input type="tel" class="form-control" id="phone" value="13800138000">
                            </div>
                            <button type="submit" class="btn btn-primary">保存更改</button>
                        </form>
                    </div>

                    <div class="tab-pane" id="security">
                        <h4>账号安全</h4>
                        <form id="securityForm">
                            <div class="form-group">
                                <label>当前密码</label>
                                <input type="password" class="form-control" id="currentPassword" required>
                            </div>
                            <div class="form-group">
                                <label>新密码</label>
                                <input type="password" class="form-control" id="newPassword" required>
                                <div class="password-strength mt-2">
                                    <div class="password-strength-bar" id="passwordStrengthBar"></div>
                                </div>
                                <small class="text-muted">密码至少8个字符，包含字母和数字</small>
                            </div>
                            <div class="form-group">
                                <label>确认新密码</label>
                                <input type="password" class="form-control" id="confirmPassword" required>
                            </div>
                            <div class="form-group mb-4">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="logoutAllDevices">
                                    <label class="form-check-label" for="logoutAllDevices">登出所有设备</label>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">更改密码</button>
                        </form>
                    </div>

                    <div class="tab-pane" id="social-links">
                        <h4>社交链接</h4>
                        <form id="socialLinksForm">
                            <div class="form-group">
                                <label><i class="fab fa-github social-icon"></i> GitHub</label>
                                <input type="url" class="form-control" id="githubUrl" placeholder="https://github.com/yourusername">
                            </div>
                            <div class="form-group">
                                <label><i class="fab fa-linkedin social-icon"></i> LinkedIn</label>
                                <input type="url" class="form-control" id="linkedinUrl" placeholder="https://linkedin.com/in/yourprofile">
                            </div>
                            <div class="form-group">
                                <label><i class="fab fa-twitter social-icon"></i> Twitter</label>
                                <input type="url" class="form-control" id="twitterUrl" placeholder="https://twitter.com/yourhandle">
                            </div>
                            <div class="form-group">
                                <label><i class="fab fa-stack-overflow social-icon"></i> Stack Overflow</label>
                                <input type="url" class="form-control" id="stackoverflowUrl" placeholder="https://stackoverflow.com/users/yourid">
                            </div>
                            <button type="submit" class="btn btn-primary">保存更改</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 头像裁剪模态框 -->
<div class="modal" id="avatarCropModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">裁剪头像</h5>
                <button type="button" class="close" id="closeCropModal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="imageCropper" style="width: 100%; height: 400px; background-color: #f5f5f5;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cancelCrop">取消</button>
                <button type="button" class="btn btn-primary" id="saveCrop">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 个人资料标签页切换
    document.querySelectorAll('.profile-menu a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();

            // 移除所有active类
            document.querySelectorAll('.profile-menu li').forEach(el => {
                el.classList.remove('active');
            });

            document.querySelectorAll('.tab-pane').forEach(pane => {
                pane.classList.remove('active');
            });

            // 添加active类到当前点击的标签
            this.parentElement.classList.add('active');

            // 显示对应的内容
            const tabId = this.getAttribute('href').substring(1);
            document.getElementById(tabId).classList.add('active');
        });
    });

    // 头像上传功能
    const avatarInput = document.getElementById('avatarInput');
    const avatarPreview = document.getElementById('avatarPreview');
    const changeAvatarBtn = document.getElementById('changeAvatarBtn');
    const uploadAvatarBtn = document.getElementById('uploadAvatarBtn');
    const avatarCropModal = document.getElementById('avatarCropModal');

    // 点击按钮触发文件选择
    changeAvatarBtn.addEventListener('click', () => avatarInput.click());
    uploadAvatarBtn.addEventListener('click', () => avatarInput.click());

    // 文件选择变化时处理
    avatarInput.addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();

            reader.onload = function(event) {
                // 这里应该显示裁剪模态框并初始化裁剪工具
                // 实际项目中可以使用Cropper.js等库
                avatarCropModal.classList.add('show');
                document.body.style.overflow = 'hidden';

                // 模拟裁剪工具初始化
                console.log('初始化裁剪工具:', event.target.result);

                // 直接预览效果（实际项目中应该在裁剪后保存）
                avatarPreview.src = event.target.result;
            };

            reader.readAsDataURL(e.target.files[0]);
        }
    });

    // 关闭模态框的函数
    function closeModal(modal) {
        modal.classList.remove('show');
        document.body.style.overflow = '';
    }

    // 关闭裁剪模态框
    document.getElementById('closeCropModal').addEventListener('click', () => closeModal(avatarCropModal));
    document.getElementById('cancelCrop').addEventListener('click', () => closeModal(avatarCropModal));

    // 保存裁剪
    document.getElementById('saveCrop').addEventListener('click', () => {
        // 这里应该处理裁剪后的图片并上传
        alert('头像更新成功！');
        closeModal(avatarCropModal);
    });

    // 密码强度检测
    document.getElementById('newPassword').addEventListener('input', function() {
        const password = this.value;
        const strengthBar = document.getElementById('passwordStrengthBar');
        let strength = 0;

        if (password.length >= 8) strength += 1;
        if (password.match(/[a-z]/)) strength += 1;
        if (password.match(/[A-Z]/)) strength += 1;
        if (password.match(/[0-9]/)) strength += 1;
        if (password.match(/[^a-zA-Z0-9]/)) strength += 1;

        const width = (strength / 5) * 100;
        strengthBar.style.width = width + '%';

        if (strength <= 2) {
            strengthBar.style.backgroundColor = '#e74c3c';
        } else if (strength <= 4) {
            strengthBar.style.backgroundColor = '#f39c12';
        } else {
            strengthBar.style.backgroundColor = '#2ecc71';
        }
    });

    // 表单提交处理
    document.getElementById('basicInfoForm').addEventListener('submit', function(e) {
        e.preventDefault();
        // 这里应该处理表单提交
        alert('基本信息已更新！');
    });

    document.getElementById('securityForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        if (newPassword !== confirmPassword) {
            alert('两次输入的密码不一致！');
            return;
        }

        // 这里应该处理密码更改
        alert('密码已更新！');
    });

    document.getElementById('socialLinksForm').addEventListener('submit', function(e) {
        e.preventDefault();
        // 这里应该处理社交链接更新
        alert('社交链接已更新！');
    });

    // 点击模态框外部关闭
    window.addEventListener('click', (e) => {
        if (e.target === avatarCropModal) {
            closeModal(avatarCropModal);
        }
    });

    // 按ESC键关闭模态框
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && avatarCropModal.classList.contains('show')) {
            closeModal(avatarCropModal);
        }
    });
</script>
</body>
</html>